<template>
	<view class="filterbar">
		<view class=" flex nav">
			<span class=" flex align-center justify-center" @tap="filterOrder(0)">默认</span>
			<span class=" flex align-center justify-center" @tap="filterOrder(1)">
				<filter-icon :sort="price"></filter-icon>
				<text class="ml10">价格</text>
			</span>
			<span class=" flex align-center justify-center" @tap="filterOrder(2)">
				<filter-icon :sort="total_sales"></filter-icon>
				<text class="ml10">销量</text>
			</span>
			<span class=" flex align-center justify-center" @tap="filterOrder(3)">
				<filter-icon :sort="stock"></filter-icon>
				<text class="ml10">库存</text>
			</span>
		</view>
		<view class="tip">{{appName}}报价已包含打包费、材料费、交易佣金</view>
	</view>
</template>

<script>
import filterIcon from '@/components/filter-icon.vue';
import { mapState } from 'vuex';
export default {
	name: 'filterbar',
	data() {
		return {
			navHeight: 50,
			total_sales: '',
			price: '',
			stock: ''
		};
	},
	components: { filterIcon },
	computed: {
		...mapState(['CustomBar','appName'])
	},
	props: {
		toTop: {
			type: [String, Number],
			default: 0
		}
	},
	mounted() {},
	methods: {
		filterOrder(type) {
			switch (type) {
				case 0: {
					this.total_sales = '';
					this.price = '';
					this.stock = '';
					break;
				}
				case 1: {
					if (this.price == 'desc') {
						this.price = 'asc';
					} else if (this.price == 'asc') {
						this.price = '';
					} else {
						this.price = 'desc';
					}
					this.total_sales = '';
					this.stock = '';
					break;
				}
				case 2: {
					if (this.total_sales == 'desc') {
						this.total_sales = 'asc';
					} else if (this.total_sales == 'asc') {
						this.total_sales = '';
					} else {
						this.total_sales = 'desc';
					}
					this.price = '';
					this.stock = '';
					break;
				}
				case 3: {
					if (this.stock == 'desc') {
						this.stock = 'asc';
					} else if (this.stock == 'asc') {
						this.stock = '';
					} else {
						this.stock = 'desc';
					}
					this.price = '';
					this.total_sales = '';
					break;
				}
			}
			let { price, total_sales, stock } = this;
			let param = {
				price,
				total_sales,
				stock
			};
			this.$emit('changeFilrer', param);
		}
	}
};
</script>

<style scoped lang="scss">
.filterbar {
	background: #fff;
	padding: 0 20upx;
	z-index: 999;
	position: absolute;
	top: 28upx;
	left: 0;
	right: 0;
	span {
		width: 136upx;
		height: 56upx;
		background: #f8f8f8;
		border-radius: 8upx;
		border: 1px solid #e0e0e0;
		color: #1c1c1e;
		font-size: 26upx;
		& + span {
			margin-left: 28upx;
		}
		&.active {
			color: #fe5608;
		}
	}
	image {
		width: 28upx;
		height: 28upx;
		margin-left: 10upx;
		display: inline-block;
		vertical-align: middle;
	}

	.filter {
		image {
			width: 26upx;
		}
	}
}
.colorlist {
	padding: 20upx 22upx;
}
.itemColor {
	padding: 0 27upx;
	height: 56upx;
	font-size: 26upx;
	color: #323232;
	line-height: 54upx;
	border-radius: 8upx;
	border: 1px solid #d6d6d6;
	margin: 8upx 6upx;
	&.active {
		background: var(--nav-bg);
		color: #fff;
		border-color: var(--nav-bg);
	}
}
.tip {
	color: #8e8e93;
	font-size: 24upx;
	line-height: 33upx;
	margin-top: 20upx;
}
</style>
